<!-- 合作列表（我发起的、找我的合作） -->
<template>
  <a-card :bordered="false" class="br-10">
    <div class="table-page-search">
      <a-form>
        <a-form-item label="合作机构">
          <a-input v-model="queryParam.orgName" placeholder="请输入机构名称" />
        </a-form-item>
        <a-form-item label="合作资源">
          <a-select v-model="queryParam.projectType" placeholder="请选择" allowClear>
            <a-select-option v-for="item in sourceList" :value="item.value" :key="item.value">{{
              item.label
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <!-- <a-form-item label="合作时间">
            <a-range-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" v-model="queryParam.joinTime" />
          </a-form-item> -->
        <span class="search-submitButtons">
          <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
          <a-button @click="handleReset">重置</a-button>
        </span>
      </a-form>
    </div>
    <div class="status">
      <span :class="['item', queryParam.apStatus === 1 && 'active']" @click="handleClickApStatus(1)">已合作</span>
      <span :class="['item', queryParam.apStatus === 0 && 'active']" @click="handleClickApStatus(0)">申请中</span>
      <span :class="['item', queryParam.apStatus === 2 && 'active']" @click="handleClickApStatus(2)">已取消</span>
    </div>
    <s-table
      ref="table"
      size="default"
      rowKey="id, enabled, title"
      :columns="columns"
      :data="loadData"
      :rowSelection="null"
    >
      <!-- 序号 -->
      <span slot="serial" slot-scope="text, record, index">
        {{ (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1 }}
      </span>

      <!-- 合作状态 -->
      <span slot="apStatus" slot-scope="text">
        {{ apStatusMap[text] }}
      </span>
      <!-- 操作按钮 -->
      <span slot="action" slot-scope="text, record">
        <template>
          <a @click="handleToDetail(record)">查看详情</a>
        </template>
      </span>
    </s-table>
  </a-card>
</template>

<script>
import { STable } from '@/components'
import { ApList, sourceList, apStatusMap } from '@/api/business/cooperation'
export default {
  props: ['my'],
  components: {
    STable,
    // DetailModal
  },
  data() {
    return {
      pagination: {
        current: 1,
        pageSize: 10,
      },
      queryParam: {
        orgName: undefined,
        projectType: undefined,
        apStatus: undefined,
      },
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          width: '80px',
        },
        {
          title: '合作机构',
          dataIndex: 'toOrgName',
          ellipsis: true,
          width: '150px',
        },
        {
          title: '合作状态',
          dataIndex: 'apStatus',
          ellipsis: true,
          width: '150px',
          scopedSlots: { customRender: 'apStatus' },
        },
        {
          title: '推荐资源',
          dataIndex: 'projectType',
          ellipsis: true,
          width: '150px',
        },
        {
          title: '本机构分佣比例',
          dataIndex: 'fromDiscount',
          ellipsis: true,
          width: '150px',
        },
        {
          title: '接入资源',
          ellipsis: true,
          width: '150px',
          scopedSlots: { customRender: 'applyType' },
        },
        {
          title: '本机构分佣比例',
          dataIndex: 'toDiscount',
          ellipsis: true,
          width: '150px',
        },
        {
          title: '申请合作时间',
          dataIndex: 'createTime',
          ellipsis: true,
          width: '180px',
        },
        {
          title: '确认合作时间',
          dataIndex: 'confirmTime',
          ellipsis: true,
          width: '180px',
        },
        {
          title: '操作',
          width: '180px',
          dataIndex: 'action',
          fixed: 'right',
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: async (parameter) => {
        var params = {
          current: parameter.pageNum,
          size: parameter.pageSize,
        }
        this.listLoading = true
        return ApList(Object.assign(params, this.queryParam, { my: this.my }))
          .then((res) => {
            this.listLoading = false
            if (res.code === 0) {
              this.pagination.current = parameter.pageNum
              this.pagination.pageSize = parameter.pageSize
              return res
            } else {
              this.$message.error(res.msg)
            }
          })
          .catch((err) => {
            this.listLoading = false
            this.$message.error(err.msg)
          })
      },
      sourceList,
      apStatusMap,
    }
  },
  created() {},
  methods: {
    handleToDetail(row) {
      this.$router.push({
        path: '/business/cooperation/cooperationDetail',
        query: {
          data: JSON.stringify(row),
          my: this.my,
        },
      })
    },
    handleReset() {
      Object.keys(this.queryParam).forEach((k) => {
        this.queryParam[k] = undefined
      })
      this.$refs.table.refresh(true)
    },
    handleClickApStatus(val) {
      if (this.queryParam.apStatus === val) this.queryParam.apStatus = undefined
      else this.queryParam.apStatus = val
      this.$refs.table.refresh(true)
    },
  },
}
</script>
<style scoped lang="less">
.status {
  margin-bottom: 20px;
  .item {
    padding: 8px 15px;
    border: 1px red solid;
    margin-left: 20px;
    cursor: pointer;
    border: 1px #1890ff solid;
    color: #1890ff;
    border-radius: 10px;
  }
  .active {
    background: #1890ff;
    color: #fff;
  }
}
</style>
